<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <!--<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> -->

    <meta name="format-detection" content="telephone=no">
    <meta name="referrer" content="no-referrer" />
    <title>{$active.name}app</title>
    {include file='default/public/header'/}
    <link href="__PUBLIC__/index/finishing/css/reset.css" type="text/css" rel="stylesheet" />
    <link href="__PUBLIC__/index/finishing/css/find.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        .fall-box .item{margin-bottom: 0.5rem;}
        .sign-item-number-box{background:{$active.theme_color};}
        .sign-item-number-box-jiao{border-top-color:{$active.theme_color};}
        .sign-item-btn{background: #f65564;}
        .hongbao{text-align: center; position: fixed; width: 100%; margin:0 auto; top: 100px; z-Index: 10;}
        .hb_show { width: 400px; text-align: center; margin:0 auto;}
        .hb_show img{display: none;  width: 100%; }
        .hongbao .amount{ display: none; position:absolute; color:#ffffff; font-size: 28px; left:190px; top: 226px;}
        body { margin:0px;padding:0px;text-align: center;}
        #hidebg { position:absolute;left:0px;top:0px;
        background-color:#000;
        width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
        filter:alpha(opacity=60);  /*设置透明度为60%*/
        opacity:0.3;  /*非IE浏览器下设置透明度为60%*/
        display:none; /* https://www.jb51.net */
        z-Index:2;}

    </style>
</head>
<body >
<p id="hidebg"></p>
<div class="page-group">
    <div class="page">
        <div class="content">
            <nav class="bar bar-tab" style="height:0;top: 0;">
                {include file='default/public/fixed'/}
            </nav>
            {include file='default/public/nav'/}
            <div class="nav-box">
                 <div class="nav-item new-signer">
                    <div style="background: {$active.btn_info.color};border-radius: 5px;">{$active.btn_info.text.0}</div>
                </div> 
                <div class="nav-item support-signer">
                    <div style="background: {$active.btn_info.color};border-radius: 5px;">{$active.btn_info.text.1}</div>
                </div>
                 <div class="nav-item my_detail">
                    <div style="background: {$active.btn_info.color};border-radius: 5px;">{$active.btn_info.text.2}</div>
                </div> 
            </div>
            <div class="list-box" style="padding:5%">
                {if condition="$count > 0"}
                <aside class="fall-box grid" style="margin: 0">
                    {foreach $list as $item}
                    <div class="grid-item item sign-item">
                        <div class="detail-jump" data-user-id="{$item.user_id}">
                            <div class="sign-item-number-box">
                                {$item.contestant_number}号
                                <div class="sign-item-number-box-jiao">&nbsp;</div>
                            </div>
                            <div class="sign-item-img-box">
                                {if condition="$item.cover"}
                                    <!-- if condition="strpos($item.cover,$site) !== false" -->
                                    {if condition="$item.sign_pass_way == 'yqsbz'"}
                                    <img src="{$item.cover}&width=150&height=60" class="item-img" />
                                    {else/}
                                    <!-- <img src="{$item.cover}?x-oss-process=image/resize,w_150" class="item-img" /> -->
                                    <img src="{$item.cover}" class="item-img" />
                                    {/if}
                                {else/}
                                    <!-- if condition="strpos($item.images.0,$site) !== false" -->
                                    {if condition="$item.sign_pass_way == 'yqsbz'"}
                                    <img src="{$item.images2}&width=150&height=60" class="item-img" />
                                    {else/}

                                    <img src="{$item.images2}" class="item-img" />
                                    <!-- <img src="***?x-oss-process=image/resize,w_150" class="item-img" /> -->
                                    {/if}
                                {/if}
                                <div class="clear"></div>
                            </div>
                            <div class="sign-item-text-box-1">
                                <div>{$item.nickname}</div>
                                <div style="display: flex;"><span id="list{$item.id}">{$item.support}</span>朵</div>
                            </div>
                        </div>
                        <div class="sign-item-btn-box">
                            <div class="sign-item-btn vote_btn" data-id="{$item.id}" data-user-id="{$item.user_id}" onclick="">送{$number}朵</div>
                        </div>
                    </div>
                    {/foreach}
                </aside>
                {else/}
                <div class="sign-list-box">
                    <div class="null-box">
                        {if condition="$keywords"}
                        搜索结果为空
                        {else/}
                        暂无人员报名
                        {/if}
                    </div>
                </div>
                {/if}
            </div>
            {eq name="$count" value="10"}
            <div class="more-btn-box">
                <div class="more-btn" style="background: {$active.theme_color};">
                    更多
                </div>
            </div>
            {/eq}
            <div>
                <img src="{$active.end_img?:''}" style="width:100%;float:left;"/>
            </div>
        </div>
    </div>
</div>

<div class="hongbao">

    
<div class="hb_show">
    <img class="hbimg" id="hongbao1" src="__PUBLIC__/index/images/hongbao1.png" >
    <img class="hbimg" id="hongbao2" src="__PUBLIC__/index/images/hongbao2.png" >
    <span class="amount"></span>
</div>
<!--     <div class="hbimg" id="hongbao2"  style="background: url('__PUBLIC__/index/images/hongbao2.png') no-repeat;" >
        获得金额：<span id="amount"></span>
    </div> -->

</div>

{include file='default/public/js'/}


<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>
<script>
    function show()  //显示隐藏层和弹出层
    {
        var hideobj=document.getElementById("hidebg");
        hidebg.style.display="block";  //显示隐藏层
        hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
    }
    function hide()  //去除隐藏层和弹出层
    {
        document.getElementById("hidebg").style.display="none";
    }


</script>




<script type="text/javascript">

var error_message = "{$error_message}";

if(error_message != ""){
    alert(error_message);
    mag.toLogin(function(rs){
        window.location.href = '{:url("index",["id"=>$active.id])}?token='+rs.token;
    });
}

//打开红包
$('#hongbao1').click(function(){
    $(this).css("display","none");
    $("#hongbao2").css("display","block");
    $(".amount").css("display","inline");
});

$('#hongbao2').click(function(){
    $("#hongbao2").css("display","none");
    $(".amount").css("display","none");
    hide();
});


    $('.my_detail').click(function(){
        location.href='{:url("detail",["id"=>$active.id])}';
    });
    var boundary = '{$boundary}',order = '{$order}';
    $('.more-btn').click(function(){
        $.showLoading();
        $.ajax({
            dataType:"json",
            type:'post',
            url:'{:url("ajax_list")}',
            data:'id={$id}&boundary='+boundary+'&order='+order+'&keywords='+$('input[name=keywords]').val(),
            success:function(result){
                if(result.data.count < 10 ){
                    $('.more-btn-box').hide();
                }
                if(result.code==0){
                    boundary = result.data.boundary;
                    appendFall( result.data.list,result.data.number);
                }
                $.hideLoading();
            },
            error:function(e){
                console.log('请求失败')
            }

        })
    });


    var $grid = $('.grid').masonry({
        itemSelector : '.grid-item',
        gutter:10
    });

    // layout Masonry after each image loads
    $grid.imagesLoaded().done( function() {
        //console.log('uuuu===');
        $grid.masonry('layout');
    });


    function appendFall(dataFall,number){
        $.each(dataFall, function(index ,value) {
            var dataLength = dataFall.length;
            $grid.imagesLoaded().done( function() {
                $grid.masonry('layout');
            });
            var detailUrl;
            var $griDiv = $('<div class="grid-item item sign-item"></div>');
            var $detail = $('<div class="detail-jump" data-user-id="'+value.user_id+'"  onclick="">');
            $detail.html('<div class="sign-item-number-box">'+value.contestant_number+'号 <div class="sign-item-number-box-jiao">&nbsp;</div> </div>').appendTo($griDiv);
            var $imgBox = $('<div class="sign-item-img-box">');
            $imgBox.appendTo($detail);
            var $img = $("<img class='item-img'>");
            if(value.cover){
                if(value.cover.indexOf("{$site}") > 0){
                    $img.attr('src',value.cover+'&width=150&height=60').appendTo($imgBox);
                }else{
                    $img.attr('src',value.cover+'?x-oss-process=image/resize,w_150').appendTo($imgBox);
                }
            }else{
                if(value.images[0].indexOf("{$site}") > 0){
                    $img.attr('src',value.images[0]+'&width=150&height=60').appendTo($imgBox);
                }else{
                    $img.attr('src',value.images[0]+'?x-oss-process=image/resize,w_150').appendTo($imgBox);
                }
            }
            var clear = $('<div class="clear">').appendTo($imgBox);
            var $section = $('<div class="sign-item-text-box-1">');
            $section.appendTo($griDiv);
            var $p1 = $('<div>');
            $p1.html(value.nickname).appendTo($section);
            var $p2 = $('<div>');
            $p2.html('<div style="display: flex;"><span id="list'+value.id+'">'+value.support+'</span>朵</div>').appendTo($section);
            var $tou = $('<div class="sign-item-btn-box">');
            $tou.html('<div class="sign-item-btn vote_btn" data-id="'+value.id+'" data-user-id="'+value.user_id+'" onclick="">送'+number+'朵</div>').appendTo($griDiv);
            var $items = $griDiv;
            $items.imagesLoaded().done(function(){
                $grid.masonry('layout');
                $grid.append( $items ).masonry('appended', $items);
            })
        });
    }

    $('.new-signer').click(function(){
        location.href = '{:url("index",["order"=>1,"id"=>$active["id"]])}';
    });

    $('.support-signer').click(function(){
        location.href = '{:url("index",["order"=>2,"id"=>$active["id"]])}';
    });

    $(document).on('click','.vote_btn',function(){
        $('.vote_btn').attr('disabled','disabled');
        var id = $(this).attr('data-id');
        $.showLoading('投票生效中...');
        $.post(
            '{:url("do_vote")}',
            'id={$active.id}&channel_id={$channel}&participant_id='+$(this).attr('data-user-id'),
            function(data){
                 $.toast(data.message);
               $.hideLoading();
                if(data.code == 0){
                    $('#list'+id).text(parseInt($('#list'+id).text())+parseInt(data.support));
                    if(data.frequency < data.reward_limit && data.reward_limit > 0){
                        show();
                        $("#hongbao1").css("display","block");
                        $(".amount").text(data.amount);
                    }else{
                        $.toast(data.message);
                    }
                    $('.vote_btn').attr('disabled',null);
                }else if(data.code == 504){
                    mag.toLogin(function(rs){
                        window.location.href = '{:url("index",["id"=>$active.id])}?token='+rs.token;
                    });
                }else{
                    $.toast(data.message, "cancel");
                }
            },
            'json'
        );
        return false;
    });


    $(document).on('click','.detail-jump',function(){
        location.href = '{:url("detail",["id"=>$active.id,"channel_id"=>$channel])}?user_id='+$(this).attr('data-user-id');
    });

    $(document).on('click','.reward_btn',function(){
        var mobile = $('input[name=mobile]').val();
        if(mobile == ''){
            $.toast('联系方式不能为空哦~');
            return false;
        }
        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/;
        if(!myreg.test(mobile))
        {
            $.toast('请输入有效的手机号码！');
            return false;
        }
        $.post('{:url("reward/chou_ajax")}',{'active_id':'{$active.id}','user_id':'{$se.user_id}','nickname':'{$se.name}','mobile':mobile},
            function(data){
                $.toast(data.message);
                if(data.code==0){
                    $('.iframe-box').hide();
                }
            },'json');
        return false;
    });

    $(document).on('click','.msh-btn',function(){
        $('.iframe-box').show();
    });

    $('.iframe-box').click(function(){
        $(this).hide();
    });
</script>

<script type="text/javascript">
    mag.setData({
        shareData: {
            title: '{$active.share_info.title}',
            des: '{$active.share_info.intro}',
            picurl: '{$active.share_info.img}',
            linkurl: '{$active.share_info.url}'
        }
    });

</script>
</body>
</html>